<template>
  <div>
    <mt-header
      title="新的朋友"
      style="background: rgb(245, 212, 169); color: black; font-size: 18px"
    >
      <mt-button @click="$router.go(-1)" icon="back" slot="left"></mt-button>
    </mt-header>
    <mt-search
      cancel-text="取消"
      v-model="value"
      placeholder="账号/手机号"
      @keyup.enter.native="searchFriendInfo"
    ></mt-search>
    <div v-if="searchFlg">
      <ul v-if="info">
        <li>
          <p style="font-size: 14px; margin: 0">联系人</p>
          <hr />
        </li>
        <div class="add">
          <li>
            <img :src="`${info.img}`" alt="" />
            {{ info.username }}
          </li>
          <mt-button size="small" @click="addFriend">添加好友</mt-button>
        </div>
      </ul>
      <ul v-else>
        <p>用户不存在</p>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 检索结果表示条件
      searchFlg: false,
      // 输入值
      value: "",
      // 好友信息
      info: [],
    };
  },
  methods: {
    // 添加好友处理
    addFriend() {
      var req = new XMLHttpRequest();
      req.open("GET", document.location, false);
      req.send(null);
      var headers = req.getAllResponseHeaders();
      this.axios
        .post(
          "/op/friendDo/addFriend",
          {
            userId: this.$store.state.id,
            friendIds: this.info.id,
          },
          {
            headers: {
              "Content-Type": "application/json",
              accesstoken: this.$store.state.accesstoken,
            },
          }
        )
        .then(res => {
          this.$messagebox(
            res.data.code == 2000 ? "提示" : "警告",
            res.data.message
          );
        });
    },
    // 好友情报检索处理
    searchFriendInfo() {
      if (this.value != "") {
        var req = new XMLHttpRequest();
        req.open("GET", document.location, false);
        req.send(null);
        var headers = req.getAllResponseHeaders();
        // 18993057703
        this.axios
          .get("/op/friendDo/searchFriend", {
            params: {
              userphone: this.value,
            },
            headers: { accesstoken: this.$store.state.accesstoken },
          })
          .then(res => {
            if (res.data.code == 2000) {
              // 好友信息取得
              this.info = res.data.data;
            } else {
              // 好友信息清楚
              this.info = null;
            }
            this.searchFlg = true;
          });
      } else {
        // 输入内容为空的场合
        this.info = null;
        this.searchFlg = false;
      }
    },
  },
};
</script>

<style lang="scss">
.mint-search {
  height: 7vh !important;
}
.mint-searchbar {
  background-color: rgb(245, 212, 169);
}
.mint-searchbar-cancel {
  color: black;
}

.add {
  display: flex;
  justify-content: space-between;

  img {
    width: 3vh;
    height: 3vh;
  }
}
ul {
  margin: 0 20px;
}
.mint-button--small {
  background-color: rgb(245, 212, 169);
  color: black;
}
.mint-search-list {
  display: none !important;
}
</style>
